<template>
  <div class="home  d-flex flex-column my-container">

    <div class="col d-flex flex-column shadow p-3 rounded-lg">

      <div class="" v-if="permersion.search">

        <el-form :model="searchModel" :inline="true">

          <el-form-item>
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd(0, '添加区域', '区域基本信息')">添加区域</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="col d-flex over-auto">
        <el-table stripe border :data="tableData" row-key="id" default-expand-all v-loading="loading"
          :tree-props="{ children: 'bZoneList', hasChildren: 'hasChildren' }">
          <el-table-column align="center" prop="zoneName" label="区域名称">
          </el-table-column>
          <el-table-column align="center" prop="zoneLevel" label="级别">
          </el-table-column>
          <el-table-column align="center" prop="remake" label="备注">
          </el-table-column>
          <el-table-column align="center" width="500px" label="操作">
            <template slot-scope="scope">
              <el-button :disabled="scope.row.zoneLevel < 4 ? false : true" type="primary" size="mini"
                @click="handleAdd(1, '添加子区域', '子区域基本信息', scope.row)">添加子区域</el-button>
              <el-button type="primary" size="mini" @click="handleAdd(2, '区域详情', '区域基本信息', scope.row)">查看</el-button>
              <el-button type="success" size="mini" @click="handleAdd(3, '编辑区域', '区域基本信息', scope.row)">编辑</el-button>
              <el-button type="warning" size="mini" @click="remove(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- <pagination class="pagination" :total="count" :page.sync="page.pageIndex" :limit.sync="page.pageSize"
        @pagination="pagination" /> -->
    </div>
    <template v-if="addDialogVisible">
      <AddDialog :activeRow="activeRow" :dialogVis="addDialogVisible" :dialogType="dialogType" :dialogTitle="dialogTitle"
        :dialogSubTitle="dialogSubTitle" @update:dialogVis="closeDialog"></AddDialog>
    </template>
  </div>
</template>

<script>
import AddDialog from "./dialog/addDialog.vue"
import CommonTable from "@/components/newSystem/newTable/CommonTable.vue"
import { selectZonePage, deleteZonById } from "@/api/regionalSettings/index"
export default {
  components: {
    CommonTable,
    AddDialog,
  },
  data () {
    return {
      loading: false,
      value: '',
      searchModel: {
        userName: ''
      },
      permersion: {
        add: true,
        del: true,
        update: true,
        search: true
      },
      count: 0,
      tableData: [],
      page: {
        pageSize: 10,
        pageIndex: 1,
      },
      addDialogVisible: false,
      dialogType: 0,
      dialogTitle: '',
      dialogSubTitle: '',
      activeRow: {}
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {
    this.getOneList()
  },
  // 存放方法事件 - 会在数据变化时被调用
  methods: {
    pagination (pageItem) {
      this.page.pageIndex = pageItem.page
      this.page.pageSize = pageItem.limit
    },

    handleAdd (type, text, subText, row = {}) {
      this.dialogType = type
      this.addDialogVisible = true
      this.dialogTitle = text
      this.dialogSubTitle = subText
      this.activeRow = row
    },
    closeDialog () {
      this.addDialogVisible = false
      this.getOneList()
    },
    remove (row) {
      this.$confirm('确定删除此区域?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteZonById(row)

      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    async deleteZonById (row) {
      const res = await deleteZonById({ id: row.id })
      if (res.status == '200') {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getOneList()
      }
    },
    async getOneList () {
      this.loading = true
      const res = await selectZonePage()
      if (res.status == '200') {
        this.tableData = res.object
      }
      this.loading = false
    },
    refresh () {
      this.getOneList()
    }
  }
}
</script>
<style lang="scss" scoped>
.status {
  display: inline-block;
  padding: 0 10px;
}

.title-container {
  display: flex;
  justify-content: flex-end;
  height: 60px;

  .search-content {
    margin-left: 20px;
    display: flex;
  }

  .addAccount {
    margin: 10px 20px;
  }
}

.pagination {
  display: flex;
  justify-content: flex-end;
}

.content {
  height: 600px;

  .drawer-title {
    font-weight: 400;
    font-size: 24px;
    color: #000000;
    text-align: center;
    padding: 36px 0;
  }

  .form {
    padding: 0 10px;
  }
}

.footer {
  height: 360px;
  display: flex;
  align-items: flex-end;
  // justify-content: st-end;
  padding: 5px 20px;
}
</style>
